<template>
    <view class="addressEdit-page">
        <!-- <uv-navbar title="添加收货地址" fixed placeholder leftIcon="arrow-left" /> -->
        <view class="addressEdit-content">
            <view class="addressEdit-content-header">
                <text>地址信息</text>
				<view class="addressEdit-content-header-checkout">					
					<uv-checkbox-group v-model="checkboxValue">
						<uv-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" label="默认收货地址" labelSize="28rpx" labelColor="#ABABAB" name="isSelect" ></uv-checkbox>
					</uv-checkbox-group> 
				</view>
                <!-- <uv-checkbox v-model="isDefault" shape="circle" @change="changeCheckbox">默认收货地址</uv-checkbox> -->
            </view>
            <view class="addressEdit-content-main">
				<view class="addressEdit-content-main-item">
					<view class="addressEdit-content-main-item-label">
						<text>收件人</text>
						<text>*</text>
					</view>
					<view class="addressEdit-content-main-item-input">
						<uv-input v-model="form.name" placeholder="收件人名字" border="none" customStyle="height: 100%;width: 100%;background-color: #F7F7F7;padding: 0 20rpx;box-sizing: border-box;border-radius: 24rpx;"/>
					</view>
				</view>
				<view class="addressEdit-content-main-item">
					<view class="addressEdit-content-main-item-label">
						<text>手机号</text>
						<text>*</text>
					</view>
					<view class="addressEdit-content-main-item-input">
						<uv-input v-model="form.mobile" placeholder="手机号码" type="number" prefixIcon="phone" border="none" customStyle="height: 100%;width: 100%;background-color: #F7F7F7;padding: 0 20rpx;box-sizing: border-box;border-radius: 24rpx;">
							<template v-slot:prefix>
								<view class="prefixBox">
									<text>+86</text>
									<image src="/static/icon/downArrow.png" mode="" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"></image>
								</view>
								
							</template>
						</uv-input>
					</view>
				</view>
				<view class="addressEdit-content-main-item">
					<view class="addressEdit-content-main-item-label">
						<text>所在地区</text>
						<text>*</text>
					</view>
					<view class="addressEdit-content-main-item-input">
						<uv-input v-model="form.name" placeholder="所在地区" border="none" customStyle="height: 100%;width: 100%;background-color: #F7F7F7;padding: 0 20rpx;box-sizing: border-box;border-radius: 24rpx;"/>
					</view>
				</view>
				<view class="addressEdit-content-main-item">
					<view class="addressEdit-content-main-item-label">
						<text>详细地址</text>
						<text>*</text>
					</view>
					<view class="addressEdit-content-main-item-input">
						<uv-textarea v-model="value" placeholder="请输入内容" border="none" height="100%" customStyle="height: 132rpx;width: 100%;background-color: #F7F7F7;padding: 26rpx 20rpx;box-sizing: border-box;border-radius: 24rpx;"></uv-textarea>
						<!-- <uv-input v-model="form.name" placeholder="详细地址" type="textarea" border="none" customStyle="height: 100%;width: 100%;"/> -->
					</view>
				</view>
            </view>
        </view>
        <view class="address-save-btn">
            <uv-button type="primary" shape="circle" size="large" @click="onSave">保存</uv-button>
        </view>
		
		
    </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        mobile: '',
        region: '',
        detail: '',
        isDefault: false,
      },
      checkboxValue: [],
      isDefault: false,
    }
  },
  methods: {
    onSave() {
      // 表单校验与保存逻辑
    },

    changeCheckbox() {
      console.log(this.isDefault);
      this.isDefault = !this.isDefault;
    },  
  }
}
</script>

<style scoped>
.addressEdit-page {
  background: #F2F2F2;
  min-height: calc(100vh);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.addressEdit-content {
	width: 100%;
	height: 668rpx;
	background: #fff;
	padding: 32rpx 0;
	box-sizing: border-box;
	margin-top: 30rpx;
}
.addressEdit-content-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
}

.addressEdit-content-main{
	width: 100%;
	padding: 0 32rpx;
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 34rpx;
	margin-top: 34rpx;
}
.addressEdit-content-main-item{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.addressEdit-content-main-item-label{
	width: 128rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.addressEdit-content-main-item-label text:nth-child(1){
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.addressEdit-content-main-item-label text:nth-child(2){
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #ff0000;
}
.addressEdit-content-main-item-input{
	width: calc(100% - 156rpx);
	margin-left: 28rpx;
	height: 92rpx;
	border-radius: 24rpx;
}
.addressEdit-content-main-item-input-inp{
	background-color: #F7F7F7;
}








.address-save-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40rpx;
  padding: 0 32rpx;
  background: transparent;
}



.prefixBox{
	display: flex;
	align-items: center;
}
.prefixBox text{
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
</style>